<html>
    <head>
        <title>v-show</title>
    </head>
    <body>
        <script>
            // ★、 v-show

                    /*
                        另一个用于根据条件展示元素的选项是v-show指令。
                        用法大致一样：

                            <h1 v-show="ok">Hello!</h1>

                            不同的是带有v-show 指令的元素始终会被渲染并保留在DOM中。  
                            v-show只是简单地切换元素的CSS  Property "dispalay"

                            注意：  v-show不支持<template>元素，也不支持 v-else


                    */


                
                //  ★、 v-if  vs  v-show
                
                                /*
                                    v-if 是 "真正的"条件渲染，因为它会确保在切换过程中条件块内的"事件监听器" 和 "子组件" 适当地被销毁和重建。

                                    v-if 也是"惰性的" : 如果在初始时条件为假，则什么也不做-----直到条件第一次变为真时，才会开始渲染天健块。

                                    相比之下， v-show 就简单的多-----不管初始条件是什么，元素总是会被渲染，并且只是简单的基于CSS进行切换。

                                    一般来说， v-if 有"更高的切换开销"，而 v-show 有更高的"初始渲染开销"。
                                    因此，如果需要非常频繁地奇幻，则使用 v-show比较好，如果在运行时天健很少改变，则使用v-if较好。
                                */
        </script>
    </body>
</html>